<template>
  <div class="home">
    <div class="index-edition">
      <div class="index-logo">
        <div class="logo">
          <img src="../../assets/img/index_bg.png">
        </div>
      </div>
      <div class="box-r4" style="padding-bottom: 10px;">
        <a class="tips" @click="showarticle=true">注意事项</a>
        <div class="itemflex">
          <div class="tips_title">标题</div>
          <div class="tips_text_box"><input type="text" class="input_text" placeholder="30个字以内" value="" v-model="title" maxlength="30"><p><span id="info_limit">{{title.length}}</span>/30</p></div>
        </div>
        <div class="itemflex">
          <div class="tips_title">简介</div>
          <input type="text" class="input_text input_text01" placeholder="50个字以内（非必填）" value="" v-model="intro" maxlength="50">
        </div>

        <div class="tips_title_2 index-edition_active" style="max-height: initial">
          <div class="top" @click="collapse()">
            <p>免费内容</p>
            <!--<div>-->
              <!--<img src="../../assets/img/shouqi.png" v-if="isfree">-->
              <!--<img src="../../assets/img/xiala.png" v-else>-->
            <!--</div>-->
          </div>
          <div v-if="isfree" style=" width: calc(100% - 68px);">
            <textarea class="add-tarea-input" placeholder="这里写的内容是免费查看的哦~" style="height: 0px;" v-model="mfcontent"></textarea>
            <van-uploader  v-model="fileList1" multiple="true" :after-read="upimg1" style="margin-bottom: 20px" :before-delete="del1">
              <img src="../../assets/img/addimg.png" class="addimg_icon">
            </van-uploader>
          </div>
        </div>
        <div class="tips_title_2" style="max-height: initial">
          <div class="tips_title" style="    line-height: 36px; padding-top: 0; padding-bottom: 0;">
            <font class="index-edition_active">付费</font>内容
          </div>
          <div style=" width: calc(100% - 68px);">
            <textarea class="add-tarea-input" placeholder="请输入付费内容" v-model="pricecontent"></textarea>
            <van-uploader  v-model="fileList2"  multiple="ture" :after-read="upimg2" :before-delete="del2" style="margin-bottom: 20px">
              <img src="../../assets/img/addimg.png" class="addimg_icon">
            </van-uploader>
          </div>
        </div>
      </div>
      <div class="tips_list_title">付费方式:二选一</div>
      <div class="paytabs">
        <div :class="saletype==0?'active':''" @click="changesaletype(0)">单卖</div>
        <div :class="saletype==1?'active':''" @click="changesaletype(1)">包时段</div>
      </div>
      <div class="box-r4" style="padding: 0;" v-if="saletype==0">
        <div>
          <div class="tips_title_3">
            <span>价格</span> 
            <input type="number" class="input_text" placeholder="填写金额/元，0则为免费" v-model.number="price" >
            <a class="tips_jiage" @click="quickprice()">快速定价</a>
          </div>
          <div class="tips_af on">
            <div class="tips_af_box">
              <div class="af_left"><b>不对返还</b></div>
              <div class="af_right">
                <label class="am-switch">
                  <input type="checkbox" name="" class="am-switch-checkbox" value="off" v-model="isreturn">
                  <div class="checkbox"></div>
                </label>
              </div>
            </div>
            <div class="switchtips" v-if="isreturn">卖家在结束后选择不对返还/正确收款</div>
          </div>
          <div class="tips_af on index-edition_active">
            <div class="tips_af_box">
              <div class="af_left"><b>定时公开</b></div>
              <div class="af_right">
                <label class="am-switch">
                  <input type="checkbox" name="" class="am-switch-checkbox" value="off" @click="regularpublic()">
                  <div class="checkbox"></div>
                </label>
              </div>
            </div>
            <div class="switchtips" v-if="isregularpublic">
              <div>所设置时间后免费查看内容</div>
              <input type="text"  readonly placeholder="选择公开时间" @click="showPicker1 = true" class="inputpicker" v-model="regularpublictimeshow"/>
              <van-popup v-model="showPicker1" position="bottom">
                <van-picker show-toolbar :columns="gktimesmb" @cancel="showPicker1 = false" @confirm="onConfirmPublictime" value-key="name"/>
              </van-popup>
            </div>
          </div>
          <div class="tips_af on index-edition_active">
            <div class="tips_af_box">
              <div class="af_left"><b>限时查看</b></div>
              <div class="af_right">
                <label class="am-switch">
                  <input type="checkbox" name="" class="am-switch-checkbox" value="off" v-model="islimittimeshow">
                  <div class="checkbox"></div>
                </label>
              </div>
            </div>
            <div class="switchtips" v-if="islimittimeshow">
              <div>买家在所设置的时间后查看内容详情</div>
              <input type="text"  readonly placeholder="选择限时查看时间" @click="showPicker2 = true" class="inputpicker" v-model="limittimeshowtime"/>
              <van-popup v-model="showPicker2" position="bottom">
                <van-datetime-picker type="datetime" title="选择时间" :min-date="minDate" @cancel="showPicker2 = false" @confirm="onConfirmLimittime"/>
              </van-popup>
            </div>
          </div>
          <div class="tips_af on index-edition_active">
            <div class="tips_af_box">
              <div class="af_left"><b>开始时间</b></div>
              <div class="af_right">
                <label class="am-switch">
                  <input type="checkbox" name="" class="am-switch-checkbox" value="off" v-model="isgametime">
                  <div class="checkbox"></div>
                </label>
              </div>
            </div>
            <div class="switchtips" v-if="isgametime">
              <div>所选时间为开始时间，此时间将会在个人主页和最新发布列表中显示</div>
              <input type="text"  readonly placeholder="选择比赛开始时间" @click="showPicker4 = true" class="inputpicker" v-model="gametime"/>
              <van-popup v-model="showPicker4" position="bottom">
                <van-datetime-picker type="datetime" title="选择时间" :min-date="minDate" @cancel="showPicker4 = false" @confirm="onConfirmgametime"/>
              </van-popup>
            </div>
          </div>
          <div class="tips_af on index-edition_active">
            <div class="tips_af_box">
              <div class="af_left"><b>定时下架</b></div>
              <div class="af_right">
                <label class="am-switch">
                  <input type="checkbox" name="" class="am-switch-checkbox" value="off" v-model="isregularsoldout">
                  <div class="checkbox"></div>
                </label>
              </div>
            </div>
            <div class="switchtips" v-if="isregularsoldout">
              <div>在设置时间后自动下架(发布后可修改)</div>
              <input type="text"  readonly placeholder="选择定时下架时间" @click="showPicker3 = true" class="inputpicker" v-model="regularsoldouttime"/>
              <van-popup v-model="showPicker3" position="bottom">
                <van-datetime-picker type="datetime" title="选择时间" :min-date="minDate" @cancel="showPicker3 = false" @confirm="onConfirmregularsoldouttime"/>
              </van-popup>
            </div>
          </div>
          <div class="tips_af on">
            <div class="tips_af_box">
              <div class="af_left"><b>有无折扣</b></div>
              <div class="af_right">
                <label class="am-switch">
                  <input type="checkbox" name="" class="am-switch-checkbox" value="off" v-model="haszekou">
                  <div class="checkbox"></div>
                </label>
              </div>
            </div>
            <div class="switchtips" v-if="haszekou">选中无折扣，此料将不参与设置的粉丝折扣</div>
          </div>
          <div class="tips_af on index-edition_active">
            <div class="tips_af_box">
              <div class="af_left"><b>内容水印</b></div>
              <div class="af_right">
                <label class="am-switch">
                  <input type="checkbox" name="" class="am-switch-checkbox" value="off" v-model="iswatermark">
                  <div class="checkbox">
                </div>
              </label>
              </div>
            </div>
            <div class="switchtips" v-if="iswatermark">
              <div>料内容将覆盖输入框文字水印</div>
              <input type="text" placeholder="请输入水印文字" class="inputpicker" v-model="watermark"/>
            </div>
          </div>
          <div class="tips_af on">
            <div class="tips_af_box">
              <div class="af_left"><b>个性模板</b></div>
              <div class="af_right">
                <label class="am-switch">
                  <input type="checkbox" name="" class="am-switch-checkbox" value="off" v-model="istemplate">
                  <div class="checkbox"></div>
                </label>
              </div>
            </div>
            <div class="switchtips" v-if="istemplate">
              <div>精美个性化模板多选一</div>
              <ul class="templateul">
                <li v-for="(item , index) in erweimmb" :class="item.id == templateid?'active':''" @click="chosetemplate(item.id)">
                  <img :src="Url+item.pic"/>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div v-else="saletype==1" class="box-r4" style="padding: 0;">
        <div>
          <div class="tips_title_3">
            <span>包时售价</span>
            <input type="number" class="input_text" placeholder="售价需大于58元" v-model.number="price1">
            <a class="tips_jiage" @click="quickprice1()">快速定价</a>
          </div>
          <div class="tips_title_3" style="border-top: .5px solid #e4e4e4;">
            <span>包时时长</span>
            <input type="number" class="input_text" placeholder="请输入天数" v-model.number="baodays" >
            <span style="color:#fc5d4d">天</span>
          </div>
          <div class="tips_af on index-edition_active">
            <div class="tips_af_box">
              <div class="af_left"><b>开始时间</b></div>
              <div class="af_right">
                <label class="am-switch">
                  <input type="checkbox" name="" class="am-switch-checkbox" value="off" v-model="isgametime">
                  <div class="checkbox"></div>
                </label>
              </div>
            </div>
            <div class="switchtips" v-if="isgametime">
              <div>所选时间为开始时间，此时间将会在个人主页和最新发布列表中显示</div>
              <input type="text"  readonly placeholder="选择比赛开始时间" @click="showPicker4 = true" class="inputpicker" v-model="gametime"/>
              <van-popup v-model="showPicker4" position="bottom">
                <van-datetime-picker type="datetime" title="选择时间" :min-date="minDate" @cancel="showPicker4 = false" @confirm="onConfirmgametime"/>
              </van-popup>
            </div>
          </div>
          <div class="tips_af on">
            <div class="tips_af_box">
              <div class="af_left"><b>个性模板</b></div>
              <div class="af_right">
                <label class="am-switch">
                  <input type="checkbox" name="" class="am-switch-checkbox" value="off" v-model="istemplate">
                  <div class="checkbox"></div>
                </label>
              </div>
            </div>
            <div class="switchtips" v-if="istemplate">
              <div>精美个性化模板多选一</div>
              <ul class="templateul">
                <li v-for="(item , index) in erweimmb" :class="item.id == templateid?'active':''" @click="chosetemplate(item.id)">
                  <img :src="Url+item.pic"/>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="am-calendar">
        <span>
            <div class="mask animate" style="display: none;"></div>
        </span>
        <span>
            <div class="content animate" style="display: none;"></div>
        </span>
      </div>
      <!--快速定价-->
      <div class="pricingbox" v-if="showpricing">
        <div class="pricing">
          <ul>
            <li v-for="(item, index) in pricing" @click="choseprice(item.price)">{{item.name}}</li>
          </ul>
          <div class="canclebtn" @click="quickprice">取消</div>
        </div>
      </div>
      <div class="pricingbox" v-if="showbaoshiprice">
        <div class="pricing">
          <ul>
            <li v-for="(item, index) in baoshipricing" @click="choseprice1(item.price)">{{item.name}}</li>
          </ul>
          <div class="canclebtn" @click="quickprice1">取消</div>
        </div>
      </div>
      <input type="button" class="red_btn" value="生成料码"  @click="submit" :disabled="submitbtn">
    </div>
    <div class="pop_attention" v-if="showarticle">
      <div class="attention">
        <div class="title">{{article.title}}</div>
        <div class="abody" v-html="article.content"></div>
        <div class="btn" @click="showarticle=false">知道了</div>
      </div>
    </div>
    <footers name="/creat"></footers>
  </div>
</template>
<script>
    import footers from '@/components/footer';
  export default {
    name: 'Home',
      components: {
          footers
      },
    data(){
      return{
          submitbtn:false,  //提交按钮是否禁止点击
          isfree:true,
          code:"",
          fileList1:[],
          fileList2:[],
          pricing:[],
          showpricing:false,
          baoshipricing:[],    //包时段价格
          showbaoshiprice:false,
          erweimmb:[],
          gktimesmb:[],
          showPicker1:false,
          showPicker2:false,
          showPicker3:false,
          showPicker4:false,
          showarticle:false,   //显示注意事项
          article:"",         //注意事项
          title:"",
          intro:"",           //简介
          mfcontent:"",       //免费内容
          pricecontent:"",   //付费内容
          mfpics:[],         //免费图片
          pricepics:[],       //付费图片
          price:"",           // 价格
          price1:"",           //包时价格
          isreturn:"",          //1不对返还
          haszekou:"",          //有无折扣，1表示选中不参与折扣， 0未选中
          isregularpublic:"",   //是否定时公开
          regularpublictime:"",  //定时公开时间
          regularpublictimeshow:"",  //定时公开时间页面显示
          islimittimeshow:"",    //是否限时查看
          limittimeshowtime:"",   //限时查看时间
          isregularsoldout:"",    //是否定时下架
          regularsoldouttime:"",   //定时下架时间
          iswatermark:"",    //是否开启水印文字
          watermark:"",     //水印文字
          istemplate:"",    //是否开启个性模板
          templateid:"",     //二维码模板图片ID
          StroageTemplateid: null,
          minDate:new Date(),
          saletype: 0,            //单卖0 包时段1
          baodays:"",            //包时天数
          isgametime:false,
          gametime:"",
      }
    },
    mounted(){
        this.material()
        if(localStorage.getItem('templateid')){
            this.StroageTemplateid = localStorage.getItem('templateid');
        }
    },
    watch:{
        'price':function (newVal,oldVal) {
            // 解决数字键盘可以输入输入多个小数点问题
            if(newVal==='' && oldVal.toString().indexOf('.')>0){
                this.price = oldVal;
                return ;
            }
            // 保留两位小数
            if(newVal){
                newVal = newVal.toString();
                var pointIndex =  newVal.indexOf('.');
                if(pointIndex>0 && (newVal.length - pointIndex)>3){
                    this.price = oldVal;
                    return ;
                }
            }
        },
        'price1':function (newVal,oldVal) {
            // 解决数字键盘可以输入输入多个小数点问题
            if(newVal==='' && oldVal.toString().indexOf('.')>0){
                this.price1 = oldVal;
                return ;
            }
            // 保留两位小数
            if(newVal){
                newVal = newVal.toString();
                var pointIndex =  newVal.indexOf('.');
                if(pointIndex>0 && (newVal.length - pointIndex)>3){
                    this.price1 = oldVal;
                    return ;
                }
            }
        }
    },
    methods:{
//        pricechange(){
//            console.log("1111")
//            this.price=this.price.replace(/[^0-9.]/g, "").trim()
//        },
        changesaletype(num){
            this.saletype=num;
            this.price="";
            this.istemplate="";
            this.templateid="";
            this.isgametime=false;
            this.gametime="";
        },
        dataload(){
            this.title="";
            this.intro="";           //简介
            this.mfcontent="";       //免费内容
            this.pricecontent="";   //付费内容
            this.mfpics=[];         //免费图片
            this.pricepics=[];       //付费图片
            this.price="";           // 价格
            this.isreturn="";          //1不对返还
            this.isregularpublic="";   //是否定时公开
            this.regularpublictime="";  //定时公开时间
            this.regularpublictimeshow="";  //定时公开时间页面显示
            this.islimittimeshow="";    //是否限时查看
            this.limittimeshowtime="";   //限时查看时间
            this.isregularsoldout="";    //是否定时下架
            this.regularsoldouttime="";   //定时下架时间
            this.iswatermark="";    //是否开启水印文字
            this.watermark="";     //水印文字
            this.istemplate="";    //是否开启个性模板
            this.templateid="";     //二维码模板图片ID
            this.fileList1=[];
            this.fileList2=[];
            this.baodays="";
            this.price1="";
        },
        //生成料码
        submit(){
            if(this.saletype==1 &&  (parseFloat(this.price1)*100<5800)){
                this.$toast("包时售价需大于58元");
                return false
            }
            var that=this, data={};
            data.title=this.title;
            data.intro=this.intro;
            data.mfcontent=this.mfcontent;
            data.pricecontent=this.pricecontent;
            data.mfpics=JSON.stringify(this.mfpics);
            data.pricepics=JSON.stringify(this.pricepics);
            data.saletype=this.saletype;
            data.gametime=this.isgametime?this.gametime:"";
            if(this.saletype==1){
                data.baodays=this.baodays;
                data.price=this.price1;
            }else {
                data.isreturn=this.isreturn?1:0;
                data.haszekou=this.haszekou?1:0;
                data.isregularpublic=this.isregularpublic?1:0;
                data.regularpublictime=this.regularpublictime;
                data.islimittimeshow=this.islimittimeshow?1:0;
                data.limittimeshowtime=this.limittimeshowtime;
                data.isregularsoldout= this.isregularsoldout;    //是否定时下架
                data.regularsoldouttime=this.regularsoldouttime;   //定时下架时间
                data.watermark=this.watermark;
                data.price=this.price;
            }
            data.qcodembid=this.templateid;

            that.submitbtn=true;
            console.log(data);
            that.request1.post1({
                url: that.Url + "api/materials/addMaterialsSave",
                params: data,
                success: function (res) {
                    that.submitbtn=false;
                    console.log(res)
                    if (res.data.code == 1) {
                        that.$toast.success("提交成功");
                        localStorage.setItem('templateid',that.templateid);
                        that.dataload();
                        that.$router.push("/Wodeliao/wodeliaoxq/"+res.data.data.materialsid);
                    } else {
                        alert(res.data.msg)
                    }
                },
                fail: function (error) {
                    alert(error.data.msg)
                }
            })
        },
        //选择模板
        chosetemplate(id){
          this.templateid=id;
        },
        //选择定时下架时间
        onConfirmregularsoldouttime(val){
            let year = val.getFullYear();
            let month = val.getMonth() + 1;
            let day = val.getDate();
            let hour = val.getHours();
            let minute = val.getMinutes();
            if (month >= 1 && month <= 9) { month = `0${month}` }
            if (day >= 1 && day <= 9) { day = `0${day}` }
            if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
            if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
            this.regularsoldouttime=`${year}-${month}-${day} ${hour}:${minute}`;
            this.showPicker3=false;
        },
        //选择限时查看时间
        onConfirmLimittime(val){
            let year = val.getFullYear();
            let month = val.getMonth() + 1
            let day = val.getDate()
            let hour = val.getHours()
            let minute = val.getMinutes()
            if (month >= 1 && month <= 9) { month = `0${month}` }
            if (day >= 1 && day <= 9) { day = `0${day}` }
            if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
            if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
            this.limittimeshowtime=`${year}-${month}-${day} ${hour}:${minute}`;
            this.showPicker2=false;
        },
        //选择开始时间
        onConfirmgametime(val){
            let year = val.getFullYear();
            let month = val.getMonth() + 1
            let day = val.getDate()
            let hour = val.getHours()
            let minute = val.getMinutes()
            if (month >= 1 && month <= 9) { month = `0${month}` }
            if (day >= 1 && day <= 9) { day = `0${day}` }
            if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
            if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
            this.gametime=`${year}-${month}-${day} ${hour}:${minute}`;
            this.showPicker4=false;
        },
        //选择定时公开时间
        onConfirmPublictime(e){
          this.regularpublictimeshow=e.name;
          this.regularpublictime=e.timeval;
          this.showPicker1=false;
        },
        //是否定时公开
        regularpublic(){
            this.isregularpublic=this.isregularpublic?false:true;
            if(this.isregularpublic){
                this.regularpublictimeshow=this.gktimesmb[0].name;
                this.regularpublictime=this.gktimesmb[0].timeval;
            }else {
                this.regularpublictimeshow="";
                this.regularpublictime="";
            }
        },
        //快速定价
        quickprice(){
          this.showpricing=this.showpricing ? false:true;
        },
        //选择价格
        choseprice(pirce){
            this.price=pirce;
            this.showpricing=false;
        },
        //包时段快速定价
        quickprice1(){
            this.showbaoshiprice=this.showbaoshiprice ? false:true;
        },
        //包时段选择价格
        choseprice1(pirce){
            this.price1=pirce;
            this.showbaoshiprice=false;
        },
        collapse(){
          this.isfree=this.isfree?false:true;
        },
        material(){
            var that=this;
            that.request1.post1({
                url: that.Url + "api/materials/materialsHtml",
                params: {  },
                success: function (res) {
                    console.log(res)
                    if (res.data.code == 1) {
                        that.article=res.data.data.article;
                        that.pricing=res.data.data.pricing;
                        that.baoshipricing=res.data.data.baoshipricing;
                        that.erweimmb=res.data.data.erweimmb;
                        that.gktimesmb=res.data.data.gktimesmb;
                        if(that.StroageTemplateid){
                            that.templateid = that.StroageTemplateid;
                        }else{
                            that.templateid=res.data.data.erweimmb[0].id;
                        }
                        that.watermark=res.data.data.matehc.watermark;
                    } else {
                        alert(res.data.msg)
                    }
                },
                fail: function (error) {
                    alert(error.data.msg)
                }
            })
        },
        upimg1(file){
            var that=this;

            if(file.constructor===Array){
                for(var i=0; i<file.length; i++){
                    file[i].status = 'uploading';
                    file[i].message = '上传中';

                    let fd = new FormData();
                    fd.append('file', file[i].file);
                    that.saveImg(fd, "img1", file[i]);

                }
            }else {
                file.status = 'uploading';
                file.message = '上传中';
                let fd = new FormData();
                fd.append('file', file.file);
                that.saveImg(fd, "img1", file);
            }
        },
        upimg2(file){
            console.log(file);
            var that=this;

            if(file.constructor===Array){
                for(var i=0; i<file.length; i++){
                    file[i].status = 'uploading';
                    file[i].message = '上传中';

                    let fd = new FormData();
                    fd.append('file', file[i].file);
                    that.saveImg(fd, "img2", file[i]);
                }
            }else {
                file.status = 'uploading';
                file.message = '上传中';
                let fd = new FormData();
                fd.append('file', file.file);

                that.saveImg(fd, "img2",file);
            }
        },
        saveImg(fd, name, file){
            var that=this;
            that.request1.post1({
                url: that.Url + "api/common/upload",
                params: fd,
                success: function (res) {
                    if (res.data.code == 1) {
                        if(name=="img1"){
                            console.log(res);
                            that.mfpics.push(res.data.data.url);
                        }else if(name=="img2"){
                            that.pricepics.push(res.data.data.url);
                        }
                        file.status = 'done';
                        file.message = '上传成功';
                    } else {
                        file.status = 'failed';
                        file.message = '上传失败';
                        that.$toast(res.data.msg);
                    }
                },
                fail:function (error) {
                    that.$toast(error.data.msg);
                    file.status = 'failed';
                    file.message = '上传失败';
                }
            })
        },
        //删除图片1
        del1(file){
            var that=this, delimgurl=file.content;

            for(var i=0; i<that.fileList1.length;i++){
                if(that.fileList1[i].content==delimgurl){
                    that.mfpics.splice(i,1)
                }
            }
            return file;
        },
        //删除图片1
        del2(file){
            var that=this, delimgurl=file.content;

            for(var i=0; i<that.fileList2.length;i++){
                if(that.fileList2[i].content==delimgurl){
                    that.pricepics.splice(i,1)
                }
            }
            return file;
        },
      }
  }
</script>
<style scoped>
  .pop_attention{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 999;
  }
  .pop_attention .attention{
    width: 80%;
    height: 70%;
    background: #fff;
    border-radius: 10px;
    position: absolute;
    top: 12%;
    left: 10%;
    padding: 10px 0;
    box-sizing: border-box;
  }
  .pop_attention .title{
    width: 96%;
    height:40px;
    line-height: 40px;
    font-size: 16px;
    margin: auto;
    text-align: center;
    font-weight: bold;
  }
  .pop_attention .abody{
    width:90%;
    height: calc(100% - 120px);
    margin:5px auto 0;
    overflow-y: scroll;
    padding: 0 8px;
    box-sizing: border-box;
  }
  .pop_attention .btn{
    background: #fc5d4d;
    color: #fff;
    font-size: 14px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    width: 86%;
    margin: auto;
    box-shadow: 0 5px 10px #f6a59f;
    border-radius: 4px;
    margin-top: 14px;
  }

  .index-edition .index-logo {
    /*display: -webkit-box;*/
    margin-top: 10px;
    display: none;
  }
  .index-edition .index-logo .logo {
    -webkit-box-flex: 1;
    margin-right: 11%;
    margin-left: 20px;
    vertical-align: middle;
    min-height: 30px;
    line-height: 24px;
  }
  .index-edition .index-logo .logo img {
    display: inline-block;
    width: 100%;
  }
  .box-r4 {
    display: block;
    background: #fff;
    padding: 0 15px;
    box-sizing: border-box;
    margin-bottom: 7px;
    overflow: hidden;
    border-radius: 0;
  }
  .red_btn {
    border-radius: 4px;
  }
  .tips_title {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    display: block;
    line-height: 14px;
    padding-top: 20px;
    padding-bottom: 10px;
  }
   .tips {
     width: 100%;
     height: 34px;
     font-weight: 400;
     line-height: 52px;
     font-size: 12px;
     text-align: right;
     display: block;
     /* float: right; */
     color: #fc5d4d;
     background: url("../../assets/img/tips_jiage.png") no-repeat left center;
    background-position: calc(100% - 52px) 20px;
    background-size: 12px;
  }
  .tips_text_box {
    display: block;
    position: relative;
  }
  tips_text_box input {
    width: 84%;
    padding: 0 12% 0 4%;
  }
  .input_text {
    height: 36px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid #e5e5e5;
    padding: 0 4%;
    background: #fff;
    width: 92%;
    display: block;
    margin-bottom: 15px;
    /*box-sizing: border-box;*/
  }
  .tips_text_box p {
    position: absolute;
    right: 6px;
    top: 13px;
    display: block;
    font-size: 12px;
    color: #999;
    height: 12px;
    line-height: 12px;
  }
  .tips_text_box p span {
    color: #fc5d4d;
  }
  .tips_title_2 {
    max-height: 48px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    margin-top: 15px;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    /* border-top: .5px solid #e5e5e5; */
    /* border-bottom: .5px solid #e5e5e5; */
  }
  .tips_title_2 .top {
    height: 36px;
    line-height: 36px;
    display: -webkit-box;
  }
  .tips_title_2 .top p {
    display: block;
  }
  .tips_title_2 .top > div {
    -webkit-box-flex: 1;
  }
  .tips_title_2 .top > div img {
    display: block;
    width: 11px;
    float: right;
    margin-top: 17px;
    margin-right: 5px;
  }
  .box-r4 .add-tarea-input {
    letter-spacing: .2px;
    display: block;
    padding: 10px 4%;
    width: 100%;
    background: #fff;
    min-height: 80px;
    line-height: 20px;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    margin-bottom: 16px;
    box-sizing: border-box;
  }
  .addimg_icon{
    width: 80px;
    height: 80px;
    margin-left: 2px;
  }
  .tips_list_title {
    padding-left: 15px;
    color: #999;
    font-weight: 700;
    line-height: 12px;
    /*padding-top: 30px;*/
    font-size: 12px;
    margin-bottom: 10px;
  }
  .tips_title_3 {
    height: 62px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    display: flex;
    padding: 0 15px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
  }
  .tips_title_3 span{
    width: 66px;
  }
  .tips_title_3 .input_text{
    width: calc(100% - 170px);
    margin-bottom: 0;
  }
  .tips_title_3 .tips_jiage {
    display: block;
    line-height: 38px;
    height: 38px;
  }
  .tips_title_3 .tips_jiage {
    width: 68px;
    font-weight: 400;
    font-size: 13px;
    color: #fc5d4d;
    text-align: right;
    background: url("../../assets/img/tips_jiage.png") no-repeat left center;
    background-size: 14px;
  }
  .tips_af {
    border-top: .5px solid #e4e4e4;
    padding: 7px 15px;
  }
  .tips_af .tips_af_box {
    display: -webkit-box;
  }
  .tips_af .tips_af_box .af_left {
    -webkit-box-flex: 1;
  }
  .tips_af .tips_af_box b {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    display: block;
    line-height: 36px;
    padding-bottom: 2px;
  }
  .tips_af .tips_af_box .af_right {
    width: 37px;
    margin-top: 9px;
  }
  .am-switch, .am-switch .checkbox {
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
  }
  .am-switch input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border: 0 none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .am-switch .checkbox {
    width: 51px;
    height: 31px;
    border-radius: 31px;
    background: #e5e5e5;
    z-index: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    transition: all .3s;
  }
  .am-switch .checkbox {
    width: 38px;
    height: 20px;
    background: #7f7f7f;
  }
  .am-switch, .am-switch .checkbox {
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
  }
  .am-switch .checkbox:before {
    width: 48px;
    box-sizing: border-box;
    z-index: 1;
    transform: scale(1);
  }
  .am-switch .checkbox:after, .am-switch .checkbox:before {
    content: " ";
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    height: 28px;
    border-radius: 28px;
    background: #fff;
    transition: all .2s;
  }
  .am-switch .checkbox:before {
    left: -2px;
    width: 35px;
    height: 18px;
    border-radius: 18px;
    background: #7f7f7f;
  }
  .am-switch .checkbox:after {
    width: 28px;
    z-index: 2;
    transform: translateX(0);
    box-shadow: 2px 2px 4px rgba(0,0,0,.21);
  }
  .am-switch .checkbox:after {
    left: -1px;
    height: 18px;
    width: 18px;
    border-radius: 18px;
    top: 1px;
  }
  .am-switch input[type=checkbox]:checked + .checkbox {
    background: #fc5d4d;
  }
  .am-switch input[type=checkbox]:checked + .checkbox:before {
    transform: scale(0);
  }
  .am-switch input[type=checkbox]:checked + .checkbox:after {
    transform: translateX(20px);
  }
  .red_btn {
    /*background: #fc5d4d;*/
    /*color: #fff;*/
    /*font-size: 14px;*/
    border: 1px solid #fc5d4d;
    color: #fc5d4d;
    font-size: 16px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    width: 90%;
    margin: 20px 5% 100px;
    /*box-shadow: 0 5px 10px #f6a59f;*/
    border-radius: 20px;
  }
  .pricingbox{
    width: 100%;
    height:100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
  }
  .pricingbox .pricing{
    position: absolute;
    bottom: 0;
    background: #efeff4;
    width: 100%;
  }
  .pricingbox .pricing ul li, .pricingbox .pricing .canclebtn{
    background: #fff;
    height:44px;
    line-height: 44px;
    text-align: center;
    font-size: 14px;
  }
  .pricingbox .pricing ul li{
    border-bottom: 1px solid #e4e4e4;
  }
  .pricingbox .pricing .canclebtn{
    margin-top: 10px;
  }
  .switchtips{
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
  }
  .inputpicker{
    height: 28px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid #e5e5e5;
    padding: 0 4%;
    box-sizing: border-box;
    background: #fff;
    width: 92%;
    display: block;
    margin-top: 10px;
  }
  .templateul{
    overflow: hidden;
    margin-top: 10px;
  }
  .templateul li{
    width: 72px;
    height: 72px;
    float: left;
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .templateul li.active{
    border: 1px solid red;
  }
  .templateul li img{
    width: 64px;
    height: 64px;
  }
  .itemflex{
    display: flex;
    align-items: flex-start;
    flex-flow: row;
    justify-content: space-between;
    padding: 10px 0;
  }
  .itemflex .tips_title{
    padding-top: 0;
    padding-bottom: 0;
    line-height: 36px;
  }
  .itemflex .tips_text_box{
    width: calc(100% - 68px);
  }
  .itemflex .input_text{
    margin-bottom: 0;
  }
  .itemflex .input_text.input_text01{
    width: calc(100% - 68px);
    box-sizing: border-box;
  }
  .paytabs{
    height: 52px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    display: flex;
    line-height: 52px;
    padding: 0 15px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-around;
    background: #fff;
    border-bottom: .5px solid #e4e4e4;
  }
  .paytabs div{
    width: 50px;
    text-align: center;
  }
  .paytabs .active{
    border-bottom: 2px solid #fc5d4d;
  }
</style>